<template>
  <div>
    <el-card class="x-card" v-loading.body="loading">
      <div slot="header">
        <span class="card-header-title">基本信息</span>
      </div>
      <div>
        <el-form :rules="rules" :inline="false" :model="form" label-position="right" label-width="80px">
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="enName" prop="enName">
                <el-input v-model="form.enName" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="cnName" prop="cnName">
                <el-input v-model="form.cnName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="cost" prop="cost">
                <el-input v-model="form.cost" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="use" prop="use">
                <el-input type="textarea" :rows="2" v-model="form.props.use"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="note" prop="note">
                <el-input type="textarea" :rows="2" v-model="form.props.note"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="图片">
                <el-upload action="http://127.0.0.1:8083/file/upload" list-type="picture-card" :on-success="onPicUploadSuccess">
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="zhuDong" v-for="(item, index) in zhuDong" :key="index" :prop="'zhuDong.' + index + '.value'">
                <el-row :gutter="10">
                  <el-col :span="18">
                    <el-input type="textarea" :rows="2" v-model="item.value" :rules="{required: true, message: '不能为空', trigger: 'blur'}"></el-input>
                  </el-col>
                  <el-row :span="6">
                    <el-button @click.prevent="removeZhuDong(item)">删除</el-button>
                  </el-row>
                </el-row>
              </el-form-item>
              <el-form-item>
                <el-button @click="addZhuDong">add</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="beiDong" v-for="(item, index) in beiDong" :key="index" :prop="'beiDong.' + index + '.value'">
                <el-row :gutter="10">
                  <el-col :span="18">
                    <el-input type="textarea" :rows="2" v-model="item.value" :rules="{required: true, message: '不能为空', trigger: 'blur'}"></el-input>
                  </el-col>
                  <el-row :span="6">
                    <el-button @click.prevent="removeBeiDong(item)">删除</el-button>
                  </el-row>
                </el-row>
              </el-form-item>
              <el-form-item>
                <el-button @click="addBeiDong">add</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="props" v-for="(item, index) in props" :key="index" :prop="'beiDong.' + index + '.value'">
                <el-row :gutter="10" style="padding-top: 10px">
                  <el-col :span="18">
                    <el-input type="textarea" :rows="2" v-model="item.value" :rules="{required: true, message: '不能为空', trigger: 'blur'}"></el-input>
                  </el-col>
                  <el-row :span="6">
                    <el-button @click.prevent="removeProp(item)">删除</el-button>
                  </el-row>
                </el-row>
              </el-form-item>
              <el-form-item>
                <el-button @click="addProp">add</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-card>
    <div class="form-operate">
      <el-button type="primary" @click="save">保存</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
  </div>
</template>
<script>
  import {post, Event} from '@/config'
  export default {
    props: {
      data: {
        type: Object,
        default () {
          return {
            id: 0,
            enName: '',
            cnName: '',
            cost: 0,
            props: {
              use: '',
              zhuDong: [''],
              beiDong: [''],
              note: '',
              props: ['']
            },
            pic: ''
          }
        }
      },
      saveCallBack: {
        type: Function,
        default: undefined
      },
      cancelCallBack: {
        type: Function,
        default: undefined
      }
    },
    mounted () {
      this.form.id = this.data.id
      this.form.enName = this.data.enName
      this.form.cnName = this.data.cnName
      this.form.cost = this.data.cost
      this.form.pic = this.data.pic
      this.form.props = {
        use: this.data.props.use,
        zhuDong: this.data.props.zhuDong,
        beiDong: this.data.props.beiDong,
        note: this.data.props.note,
        props: this.data.props.props
      }
      this.decodeForm()
    },
    data () {
      return {
        dateRangeOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        loading: false,
        zhuDong: [],
        beiDong: [],
        props: [],
        form: {
          id: 0,
          enName: '',
          cnName: '',
          cost: 0,
          props: {
            use: '',
            zhuDong: [''],
            beiDong: [''],
            note: '',
            props: ['']
          },
          pic: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入名称', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      decodeForm () {
        let that = this
        this.form.props.zhuDong.forEach(function (item) {
          that.zhuDong.push({
            value: item
          })
        })
        this.form.props.beiDong.forEach(function (item) {
          that.beiDong.push({
            value: item
          })
        })
        this.form.props.props.forEach(function (item) {
          that.props.push({
            value: item
          })
        })
      },
      encodeForm () {
        let that = this
        this.zhuDong.forEach(function (item) {
          that.form.props.zhuDong.push(item.value)
        })
        this.beiDong.forEach(function (item) {
          that.form.props.beiDong.push(item.value)
        })
        this.props.forEach(function (item) {
          that.form.props.props.push(item.value)
        })
      },
      save () {
        // do save
        this.loading = true
        this.encodeForm()
        let that = this
        post('/api/item/update', this.form, function (t) {
          if (t.status === 200) {
            that.loading = false
            that.$message({
              message: '修改成功',
              type: 'success'})
          } else {
            that.loading = false
            that.$message({
              message: t.errMsg,
              type: 'success'})
          }
        }, function (t) {
          that.loading = false
          that.$message({
            message: '网络异常',
            type: 'error'})
        })
        if (this.saveCallBack !== undefined) {
          this.saveCallBack()
        } else {
          // close page
          Event.$emit('closeMenu')
        }
      },
      cancel () {
        // do cancel
        if (this.cancelCallBack !== undefined) {
          this.cancelCallBack()
        } else {
          // close page
          Event.$emit('closeMenu')
        }
      },
      onPicUploadSuccess (response, file, fileList) {
        this.pics = fileList
      },
      removeZhuDong (item) {
        let index = this.zhuDong.indexOf(item)
        if (index !== -1) {
          this.zhuDong.splice(index, 1)
        }
      },
      addZhuDong () {
        this.zhuDong.push('')
      },
      removeBeiDong (item) {
        let index = this.beiDong.indexOf(item)
        if (index !== -1) {
          this.beiDong.splice(index, 1)
        }
      },
      addBeiDong () {
        this.beiDong.push('')
      },
      removeProp (item) {
        let index = this.props.indexOf(item)
        if (index !== -1) {
          this.props.splice(index, 1)
        }
      },
      addProp () {
        this.props.push('')
      }
    }
  }
</script>
<style>
  .x-card {
    margin-top: 10px;
  }
  .card-header-title {
    line-height: 36px;
  }
  .form-operate {
    margin-top: 20px;
    text-align: center;
  }
</style>
